<template>
  <div class="my-menu-item">
    <MyAction ref="reference" class="my-menu-item-title" @click="onClick">{{ title }}</MyAction>
    <div v-if="$slots.default" v-show="show" ref="floating" class="my-menu-item-sub" :style="floatingStyles">
      <slot></slot>
    </div>
  </div>
</template>

<script setup lang="ts">
import { useFloating } from '@floating-ui/vue';
import { onClickOutside } from '@vueuse/core';

defineProps<{
  title: string
}>()
const slots = useSlots()


const show = ref(false)
const reference = ref(null);
const floating = ref(null);
const { floatingStyles } = useFloating(reference, floating);
onClickOutside(reference, (ev) => {
  show.value = false
}, {
  // ignore: ['.my-menu-item']
})
function onClick() {
  show.value = !show.value
}
</script>

<style lang="scss" scoped>
.my-menu-item-title {
  padding: 0 1rem;
}

.my-menu-item-sub {
  background: #c0c0c0;
  z-index: 1000;
  box-shadow: inset -1px -1px #0a0a0a, inset 1px 1px #fff, inset -2px -2px grey, inset 2px 2px #dfdfdf;
  padding: 2px;
}
</style>